<template>
  <div class="resume">
    <div class="content">
      <div
        class="scetion"
        v-for="(resume, index) in resumes"
        :key="index"
      >
        <h1 class="title">{{ resume.title }}</h1>
        <div class="boxes">
          <div class="box" v-for="(box, index) in resume.box" :key="index">
            <div class="row" v-if="Array.isArray(box)">
              <div class="des" v-for="(item, index) in box" :key="index">{{ item }}</div>
            </div>
            <div v-else-if="typeof box === 'object'" class="item">
              {{ box.name }}
              <a :href="box.url" target="_blank">{{ box.url }}</a>
            </div>
            <div v-else class="item">{{ box }}</div>
          </div>
        </div>
      </div>
      <div class="yuandian">.....</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'resume',
  data () {
    return {
      resumes: [
        {
          title: '联系方式',
          box: [
            ['• 网站 : www.tianxianliang.fun']
          ]
        },
        {
          title: '个人信息',
          box: [
            [
              '• 田先亮 | 男 | 20',
              '• 郑州大学 | 计算机网络 | 大专',
              '• 工作经历 | 应届生'
            ],
            {
              name: '• Gitee : ',
              url: 'https://gitee.com/tianxianliang'
            },
            {
              name: '• 技术博客 : ',
              url: 'http://www.tianxianliang.fun'
            }
          ]
        },
        {
          title: '技术优势',
          box: [
            '• 熟练各种Web前端技术,包括HTML、CSS、JavaScript、jQuery、AJAX、JSON、Vue等',
            '• 使用移动端的rem布局,响应式布局,解决不同移动端设备的适配和兼容问题。',
            '• 熟悉bootstrap、Jquery类库、Vue进行pc端、移动端项目快速开发。',
            '• 熟练使用github进行代码管理，使用git版本管理工具。',
            '• 熟悉原生JS,熟悉JavaScript的面向对象编程，了解作用域以及闭包的原理。',
            '• 熟练使用Chrome 、Firefox等主流浏览器的开发人员工具调试页面。',
            '• vue框架对模块化开发有着一定的理解。',
            '• 了解node.js，利用其搭建简单的服务器。'
          ]
        }
      ]
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.resume {
  width: 100%;
  background-image: url(../../assets/images/beijing.jpg);
  position: absolute;
  font-family: Microsoft Yahei;
  .content {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    color: #3f1c1c;
    font-size: 14px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, .15);
    .scetion {
      .title {
        font-size: 18px;
        color: #111;
        position: relative;
        margin-bottom: 20px;
        &::after {
          content: '';
          position: absolute;
          width: 5px;
          height: 100%;
          left: -20px;
          top: 0;
          background-color:#345462;
        }
      }
      .boxes {
        border-radius: 2px;
        background-color: #f5f5f5;
        margin-bottom: 20px;
        .box {
          .row {
            display: flex;
            flex-wrap: wrap;
            .des {
              padding: 10px 15px;
              flex: 0 0 33.3%;
              box-sizing: border-box;
            }
          }
          .item {
            padding: 10px 15px;
            line-height: 1.5;
            a {
              color: #666;
            }
          }
        }
      }
    }
  }
}

.yuandian {
  font-size: .9rem;
}

@media screen and (max-width: 600px) {
  .des {
    flex: 0 0 100% !important;
  }
}
</style>
